查看原文
其他

如丝般顺滑!4 行代码就能创建一个数据流工具!

IT服务圈儿 2022-09-10

The following article is from 开源前哨 Author 小秋


作者 l 小秋

来源 l 本文转载自公众号:开源前哨(ID:ai-dao-gu)


【导语】:Drawflow可以用来快速创建数据流,支持节点拖拽、多重连接、数据节点同步、数据模块清除、移动端设备友好等功能。


简介


Drawflow 是一个简单的数据流库,可以用来轻松、快速地创建数据流,只需要安装一个 JS 库,运行 4 行代码即可轻松创建一个页面。



Drawflow支持以下功能:

1、节点拖拽

2、多输入、输出

3、多重连接

4、删除节点和连接

5、添加和删除输入、输出

6、重新路由连接

7、节点数据同步

8、放大、缩小

9、清除数据模块

10、支持模块

11、编辑模式fixed和edit

12、导入、导出数据

13、事件

14、支持移动设备

15、简单的JavaScript,无依赖项

16、支持NPM、Vue、Nuxt


安装使用


项目地址:

https://github.com/jerosoler/Drawflow


1、源码安装,执行以下命令后,复制dist文件夹,引入到文件中即可使用:

git clone https://github.com/jerosoler/Drawflow.git

2、CDN引入:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"><script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>

3、npm安装:

npm i drawflow

4、Import引入:

import Drawflow from 'drawflow'import styleDrawflow from 'drawflow/dist/drawflow.min.css'

5、Require引入:

var Drawflow = require('drawflow')var styleDrawflow = require('drawflow/dist/drawflow.min.css')

6、创建drawflow的父元素:

<div id="drawflow"></div>

7、运行drawflow

var id = document.getElementById("drawflow");const editor = new Drawflow(id);editor.start();

8、Vue2.0版本的例子:

import Vue from 'vue'// Pass render Vuethis.editor = new Drawflow(id, Vue);

9、Vue3.0 版本的例子:

import * as Vue from 'vue'// Pass render Vuethis.editor = new Drawflow(id, Vue);

10、Nuxt,将以下代码添加到 nuxt.config.js 文件:

build: {    transpile: ['drawflow'],    ... }


鼠标键盘


1、del 键用来删除元素

2、鼠标右键后会出现删除选项

3、按住鼠标左键可以选中节点或拖动节点

4、Ctrl+滚动轮可以放大缩小


使用


1、在编辑页面划分模块:

editor.addModule('nameNewModule');editor.changeModule('nameNewModule');editor.removeModule('nameModule');// Default Module is Homeeditor.changeModule('Home');

2、添加节点

var html = `<div><input type="text" df-name></div>`;var data = { "name": '' };editor.addNode('github', 0, 1, 150, 300, 'github', data, html);

3、注册节点:

var html = document.createElement("div");html.innerHTML =  "Hello Drawflow!!";editor.registerNode('test', html);// Useeditor.addNode('github', 0, 1, 150, 300, 'github', data, 'test', true);// For vueimport component from '~/components/testcomponent.vue'editor.registerNode('name', component, props, options);// Use for vueeditor.addNode('github', 0, 1, 150, 300, 'github', data, 'name', 'vue');

4、事件通知。可以对节点创建、删除、选中、取消选中、移动,创建连接、删除连接等事件进行监听:

editor.on('nodeCreated', function(id) {  console.log("Node created " + id);})

5、官方提供了一个在线例子,可以用来尝试体验,地址是:

https://jerosoler.github.io/Drawflow/



有偿征稿IT服务圈儿正式开启投稿通道,稿费:60~5000元不等,长期有效!!!
点此查看详情


1、夜深了,源代码里突然来了一个新朋友!

2、推荐一款IDEA神器!一键查看Java字节码以及其他类信息

3、漫画 | 一台Linux服务器最多能支撑多少个TCP连接?

4、逆向爬虫时,Python 如何正确调用 JAR 加密逻辑?

识别关注我们

了解更多精彩内容

点分享

点点赞

点在看

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存